<template>
    <fieldset>
        <legend>产品</legend>
        <h1>{{$store.state.Product.tag}}</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                <span>产品名称:</span>
                <b>{{item.title}}</b>
                ---
                <span>产品单价:</span>
                <b>{{item.price}}</b>
                ---
                <span>库存:</span>
                <b>{{item.inventory}}</b>
                ---
                <button :disabled="item.inventory==0" @click="add_to_cart(item)">+点击加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
    //引入赋值函数
    import { mapActions, mapState, mapMutations } from "vuex"
    export default {
        mounted() {
            // this.$store.commit('Product/SET_PRODUCT')
            console.log(this)
            this['Product/FETCH_PRODUCT']()
        },
        computed: { //映射Product模块中的products状态
            ...mapState("Product", ['products'])
        },
        methods: {//调用Product模块中的action
            ...mapActions(['Product/FETCH_PRODUCT', "Cart/GET_PRODUCT"]),
            //Product模块中的mutation
            // ...mapMutations('Product', ['DECREMENT_INVENTORY']),
            //调用Cart模块的action
            add_to_cart(item) {
                this['Cart/GET_PRODUCT'](item);
                // this.DECREMENT_INVENTORY(item)
            }
        }
    }
</script>